<script setup lang="ts">
import {ref} from 'vue'
import {showSuccessToast, showToast} from 'vant'
import { mobileRules,passwordRules,codeRules } from '@/utils/rules'
import {loginBypasswordAPI,sendCodeAPI,loginByCodeAPI} from '@/api/user'
import {useUserStore} from '@/stores'
import {useRouter,useRoute} from 'vue-router'
const mobile=ref<string>('13230000005')
const password=ref<string>("abc12345")
const agree=ref(false)
const store = useUserStore()
const router=useRouter()//有带r的router是操作路由的
const route = useRoute()//没有带r的route是操作url
const isPassword=ref(false)
const code=ref<string>('')
const login=async()=>{
    // console.log("登陆成功")
    if(!agree.value){
      return showToast("请勾选同意")
        
    }
    // console.log("登录成功")

    //登录部分
    //调用接口进行登录，如果登录成功跳到首页，否则提示登录失败
    if(isPassword){
      const res=await loginBypasswordAPI(mobile.value,password.value)
    console.log(res)
    store.setUser(res.data)
    }else{
      const res=await loginByCodeAPI(mobile.value,code.value)
    // console.log(res)
    store.setUser(res.data)
    }
    

    showSuccessToast("登录成功")

    //跳到首页
    //如果登录地址带有回跳地址的应该跳回那个地址，没有的话跳回首页
    router.push((route.query.returnUrl as string)||'/')
    

  }
    //发送验证码
    //有倒计时，如果倒计时没有归零 验证是不能被发送的
    //当倒计时归零后调用验证码发送接口进行发送
    //发送验证码之后再开启倒计时
    const time=ref(0)
    const send=async()=>{
      const res=await sendCodeAPI(mobile.value,'login')
      console.log(res.data)
      if(time.value>0) return
      // console.log("发送成功")
      
      time.value=60
    //  开启计时器,进行倒计时
      let timeId= window.setInterval(()=>{
        time.value--
        if(time.value==0) window.clearInterval(timeId)
      },1000)

    }
    


</script>

<template>
    <div class="login-page">
        <cp-nav-bar
          right-text="注册"
          @click-right="$router.push('/register')"
        ></cp-nav-bar>
        <!-- 头部 -->
        <div class="login-head" >
          <h3>{{ isPassword?'密码登录':'短信验证码登录' }}</h3>
          <a href="javascript:;">
            <span @click="isPassword=!isPassword">{{isPassword?'短信验证码登录':'密码登录'}}</span>
            <van-icon name="arrow"></van-icon>
          </a>
        </div>
        <!-- 表单 -->
        <van-form autocomplete="off" @submit="login">
          <van-field  placeholder="请输入手机号" type="tel" v-model="mobile" :rules="mobileRules"></van-field>
          <van-field v-if="isPassword" placeholder="请输入密码" type="password" v-model="password" :rules="passwordRules"></van-field>
          <van-field v-else
          v-model="code"
          placeholder="请输入验证码"
          type="tel"
          :rules="codeRules"
          >
          <template #button>
            <span class="btn-send" @click="send">{{time>0?time+'s后发送':'发送验证码'}}</span>
          </template>

          </van-field>
          
          <div class="cp-cell">
            <van-checkbox v-model="agree">
              <span>我已同意</span>
              <a href="javascript:;">用户协议</a>
              <span>及</span>
              <a href="javascript:;">隐私条款</a>
            </van-checkbox>
          </div>
          <div class="cp-cell">
            <van-button block round type="primary" native-type="submit">登 录</van-button>
          </div>
          <div class="cp-cell">
            <a href="javascript:;">忘记密码？</a>
          </div>
        </van-form>
        <!-- 底部 -->
        <div class="login-other">
          <van-divider>第三方登录</van-divider>
          <div class="icon">
            <img src="@/assets/logo.svg" alt="" />
          </div>
        </div>
      </div>
</template>
<style lang="scss" scoped>
.login {
    &-page {
      padding-top: 46px;
    }
    &-head {
      display: flex;
      padding: 30px 30px 50px;
      justify-content: space-between;
      align-items: flex-end;
      line-height: 1;
      h3 {
        font-weight: normal;
        font-size: 24px;
      }
      a {
        font-size: 15px;
      }
    }
    &-other {
      margin-top: 60px;
      padding: 0 30px;
      .icon {
        display: flex;
        justify-content: center;
        img {
          width: 36px;
          height: 36px;
          padding: 4px;
        }
      }
    }
  }
  .van-form {
    padding: 0 14px;
    .cp-cell {
      height: 52px;
      line-height: 24px;
      padding: 14px 16px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      .van-checkbox {
        a {
          color: var(--cp-primary);
          padding: 0 5px;
        }
      }
    }
    .btn-send {
      color: var(--cp-primary);
      &.active {
        color: rgba(22,194,163,0.5);
      }
    }
  }
</style>
